<template name="message">
  <view class="mask">
    <view class="content">
      <view class="avatar">
        <img :src="$countImgUrl(userInfo.face)" class="img">
      </view>
      <view class="title">{{userInfo.nickname}}</view>
      <button class="jump-btn" @click="gotoChat" type="primary" size="large">
        立即私聊
      </button>
      <view class="close" @click="closeMsg">
        <img src="https://img.qumoyugo.com/webimgbg/home_venture_bell_window_delete_icon.png" class="img">
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { useStore } from '@/store'
const { $countImgUrl } = getCurrentInstance().appContext.config.globalProperties
const emit = defineEmits(['close'])
const store = useStore()
const userInfo = computed(() => {
  return store.state.bellDisposition || {}
})
const closeMsg = () => {
  emit('close')
}
const gotoChat = () => {
  uni.navigateTo({
    url: `/msg/chatFrame?phone=${userInfo.value.phone}`
  })
  closeMsg()
}
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  padding: 20rpx;
}
.content {
  width: 558rpx;
  height: 686rpx;
  background: url(https://img.qumoyugo.com/webimgbg/home_venture_bell_window_bg.png) no-repeat;
  background-size: 100%;
  border-radius: 32rpx;
  padding-top: 220rpx;
  text-align: center;
  position: relative;
  animation: 0.3s linear slidein;
  transition: all 0.1s;
  .avatar{
    width: 72px;
    height: 72px;
    border: 1px solid #333333;
    border-radius: 50%;
    margin:  0 auto;
    overflow: hidden;
    .img{
      width: 70px;
      height: 70px;
    }
  }
  .title {
    font-size: 32rpx;
    margin: 36rpx 0 54rpx;
    color: #333333;
    font-weight: 500;
  }
  .jump-btn {
    width: 278rpx;
    height: 42px;
    background: #E9EDFF;
    border: 1rpx solid #333333;
    border-radius: 42px;
    line-height: 40px;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }
  .close{
    width: 64rpx;
    height: 64rpx;
    padding: 4rpx;
    position: absolute;
    top: 80rpx;
    right: 60rpx;
    .img{
      width: 56rpx;
      height: 56rpx;
    }
  }
}
@keyframes slidein {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
